<h1 class="text-2xl font-bold mb-4">Demo 1</h1>

<div class="flex space-x-10">
  <div class="messages">
    <button
      (click)="addSuccessInfo('success from demo 1')"
      class="btn-success mb-4"
    >
      Success
    </button>
    <h3 class="text-lg font-semibold text-green-600 mb-2">Success</h3>
    <pre>{{ successMessages() | json }}</pre>
  </div>

  <div class="messages">
    <button (click)="addErrorInfo('error from demo 1')" class="btn-error mb-4">
      Error
    </button>
    <h3 class="text-lg font-semibold text-red-600 mb-2">Error</h3>
    <pre>{{ errorMessages() | json }}</pre>
  </div>
</div>
